<template>
	<view class="container">
		<!-- 弹出层遮罩层 -->
		<view class="bg" v-if="isFocus"></view>
		<!-- 返回栏 -->
		<view class="header-nav">
			<!-- <view class="status_bar"></view> -->
			<statusBar></statusBar>
			<!-- 自定义状态栏 -->
			<view class="status_title">
				<view class="status_left">
					<image class="" src="@/static/go-back.svg" mode="widthFix" @click="goBack"></image>
					<view class="status_header">
						<image :src="postDetails.data.avatarUrl" mode="widthFix"></image>
						<text>{{postDetails.data.nickName}}</text>
					</view>
				</view>
				<view class="status_right" >
					<view v-if="!postDetails.data.isInterest" type="default" @click="changeAttention">关注</view>
					<view v-else type="default" class="followed" @click="changeAttention">已关注</view>
					<image class="" src="@/static/share.svg" mode="widthFix" @click="toShare"></image>
				</view>
			</view>
		</view>

		<view class="content-right">
			<view class="swiper">
				<swiper :indicator-dots="true" :interval="3000" :duration="1000">
					<swiper-item v-for="item in postDetails.data.banner" :key="item">
						<view class="swiper-item">
							<image
								:src="item">
							</image>
							<view class="try-it-on">
								<image src="../../static/AR2.svg"/>
								<text>AR试戴</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="content-aside">
				<view class="content-title">
					{{postDetails.data.title}}
				</view>
				<view class="content-sub-title">
					{{postDetails.data.content}} <text v-for="item in postDetails.data.topicId" :key="item.id">#{{item.content}}</text>
				</view>
				<view class="content-ip">
					编辑于{{postDetails.data.updatedTime}} {{postDetails.data.ipAddress}}
				</view>

				<!-- 评论 -->
				<view class="content-reviews">
					<view class="number">共{{postDetails.data.comments}}条评论</view>
					<view class="comment-con">
						<view v-for="(item,index) in commentData.tableData" :key="item.id">

							<!-- 没有children -->
							<view v-if="item.comCount == 0" class="item">
								<image src="https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp"/>
								<view class="item-con">
									<view class="item-auth">
										<view v-if="item.isAuth">作者</view> 
										{{item.nickName}}
									</view>
									<text>{{item.content}}</text>
									<view class="item-time">
										{{item.newTime}}.{{item.ipAddress}} 
										<text v-if="item.isAuth" @click="changeDel(item)">删除</text>
										<text @click="changeReply(item)">回复</text>
									</view>
								</view>
								<view class="item-like" @click="changeCommentLike(item)">
									<image v-if="item.isLike" src="../../static/like.svg"/>
									<image v-else src="../../static/no-like.svg"/>
									<text>{{item.likes}}</text>
								</view>
							</view>

							<!-- 有children -->
							<view v-else class="item-children">
								<view class="item">
									<image src="https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp"/>
									<view class="item-con">
										<view class="item-auth">
											<view v-if="item.isAuth">作者</view> 
											{{item.nickName}}
										</view>
										<text>{{item.content}}</text>
										<view class="item-time">
											{{item.newTime}}.{{item.ipAddress}} 
											<text v-if="item.isAuth" @click="changeDel(item)">删除</text>
											<text @click="changeReply(item)">回复</text>
										</view>
									</view>
									<view class="item-like" @click="changeCommentLike(item)">
										<image v-if="item.isLike" src="../../static/like.svg"/>
										<image v-else src="../../static/no-like.svg"/>
										<text>{{item.likes}}</text>
									</view>
								</view>
								<!-- 子评论 -->
								<view class="children-con">
									<view class="item" v-for="(item2,index2) in item.childrenData.list" :key="item2.id">
										<image src="https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp"/>
										<view class="item-con">
											<view class="item-auth">
												<view v-if="item2.isAuth">作者</view> 
												<!-- 判断是直接回复的第一层评论还是回复的子评论里面的评论 -->
												<text v-if="item2.replyId == item.id">{{item2.nickName}}</text>
												<text v-if="item2.replyId != item.id">{{item2.nickName}} &nbsp;&nbsp;▶&nbsp;&nbsp; {{item2.replyNickName}}</text>
											</view>
											<text>{{item2.content}}</text>
											<view class="item-time">
												{{item2.newTime}}.{{item2.ipAddress}} 
												<text v-if="item2.isAuth"  @click="changeDel(item2)">删除</text>
												<text v-else @click="changeReply(item,item2)">回复</text>
											</view>
										</view>
										<view class="item-like" @click="changeCommentLike(item2)">
											<image v-if="item2.isLike" src="../../static/like.svg"/>
											<image v-else src="../../static/no-like.svg"/>
											<text>{{item2.likes}}</text>
										</view>
									</view>
									<!-- 展开剩余评论 -->
									<view class="unfold" v-if="item.comCount-item.childrenData.list.length>0" @click="unfoldComment(item)">展开{{item.comCount-item.childrenData.list.length}}条评论</view>
								</view>
							</view>
						</view>

					</view>
				</view>

				<!-- 暂无评论 -->
				<view class="is-end" v-if="commentData.isEnd">没有更多了</view>
			</view>
		</view>
		<!-- 底部回复框 -->
		<view class="comment-view"> 
			<view class="comment-top" :class="{'is-father-focus':isFocus}">
				<view class="comment-left" :class="{'is-focus':isFocus}">
					<uni-easyinput 
						type="textarea" 
						:placeholder="placeholderVal" 
						:focus="isFocus" 
						ref="inputRef" 
						v-model="inputVal" 
						:selection-start="aiteList.cursorStart"
						:selection-end="aiteList.cursorEnd"
						autoHeight
						@focus="inputFocus" 
						@blur="inputBlur"
						:maxlength="200"
					></uni-easyinput>
					<!-- <input 
						:placeholder="placeholderVal" 
						:focus="isFocus" 
						ref="inputRef" 
						v-model="inputVal" 
						:selection-start="aiteList.cursorStart"
						:selection-end="aiteList.cursorEnd"
						@focus="inputFocus" 
						@blur="inputBlur"
					/> -->
					<!-- <input placeholder="留下你的评论吧～" :focus="isFocus" ref="inputRef" v-model="inputVal" @focus="inputFocus"/> -->
					<view class="send" v-if="isFocus">
						<image src="../../static/aite.svg" @tap="aite"/>
						<!-- <view @touchstart.stop="toSend">发送</view> -->
						<view @touchstart="toSend">发送</view>
					</view>
				</view>
				
				<view class="comment-right" v-if="!isFocus">
					<view @click="changeLike">
						<image v-if="postDetails.data.isLike" src="../../static/like.svg" />
						<image v-else src="../../static/abreast-no-like.svg" />
						<text>{{functions.exchangeUnit(postDetails.data.likes || 0)}}</text>
					</view>
					<view @click="changeCollect">
						<image v-if="postDetails.data.isCollection" src="../../static/collect.svg" />
						<image v-else src="../../static/no-collect.svg" />
						<text>{{functions.exchangeUnit(postDetails.data.collection || 0)}}</text>
					</view>
					<view>
						<image src="../../static/msg.svg" />
						<text>{{functions.exchangeUnit(postDetails.data.comments || 0)}}</text>
					</view>
				</view>
			</view>
			<view class="safe-padding" v-if="!isFocus"></view>
		</view>

		<!-- 分享弹框 -->
		<popupShare ref="popupShareRef" :id="postingId" :dataInfo="dataInfo"></popupShare>
		
		<!-- 删除弹窗 -->
		<uni-popup ref="delPopupRef" type="dialog">
			<uni-popup-dialog mode="base" title="" :content="delPopupData.content" :before-close="true" @close="delCloseFun"
				@confirm="delConfirmFun"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script setup>
	import CComment from "@/components/cc-comment/index";
	import { onLoad,  onShow, onReachBottom } from "@dcloudio/uni-app";	
	import { ref,reactive,onMounted,nextTick,computed,watch } from 'vue'
	import { articleDetail,commentsPages,artSaveLike,artSaveCollect, commentsInsert, commentsDelete,commentsSaveLike } from '@/api/posting.js'
	import { collectionUser } from '@/api/user.js'
	import functions from '@/utils/functions.js'

	//分页数据
	const pageData = reactive({
		pageSize:10,
		page:1
	})
	//评论相关数据
	const commentData = reactive({
		tableData:[],
		authInfo:{
			id: 3, //  用户id
			user_name: "李清照", // 用户名
			user_avatar: "https://pic1.zhimg.com/80/v2-a79071a705f55c5d88f6c74e6111fe84_720w.webp", // 用户头像
		},
		isEnd:false //数据是否已经加载完毕
	}) 
	//删除弹框相关数据
	const delPopupRef = ref(null)
	const delPopupData = reactive({
		content:'确定删除这条评论吗?',
		temp:{}
	})

	//是否获取焦点
	const isFocus = ref(false)
	const inputRef = ref(null)
	//帖子id
	const postingId = ref(0)
	//帖子详情
	const postDetails = reactive({
		data:{}
	})
	const popupShareRef = ref(null)
	const dataInfo = reactive({})
	//评论输入框
	const inputVal = ref('')
	//回复框 回复的人的信息
	const myReplyTemp = reactive({
		data:{},
		status:1, //当前输入框是 回复别人 还是 新评论输入   1新评论输入   2回复别人
	});
	//输入框 @ 的人
	const aiteList = reactive({
		cursorIndex:0,//光标位置
		list:[],
		cursorStart:0, //当删除@的人后重新设置光标的位置
		cursorEnd:0,//当删除@的人后重新设置光标的位置
	})

	//从 消息中心-评论和@ 列表那跳转过来 存储评论id
	const postCommentId = ref(null)

  const goBack = () => {
    uni.navigateBack({ delta: 1 })
  }
	/**
	 * 生命周期函数--监听页面加载
	 * id: 帖子id
	 * isComment: 是否获取焦点
	 * friendId: @ 好友的id
	 * commentId: 评论id  如果有代表从 消息中心-评论和@ 列表那跳转过来
	 */
	onLoad(({id,isComment,commentId}) => {
		// console.log('option',option);
		postingId.value = Number(id)
		// isComment 有值，输入框获取焦点
		if(isComment){
			// console.log('获取焦点')
			// inputFocus()
			// isFocus.value = true
			uni.hideKeyboard()
		}
		// 从消息中心-评论和@ 列表那跳转过来
		if(commentId){
			postCommentId.value = Number(commentId)
		}
	})

	onShow(() => {
		//当从@好友页面返回的时候 判断有没有@的好友
		let aiteUser = wx.getStorageSync('aiteUserInfo')
		console.log('onShow aiteUser',aiteUser)
		if(aiteUser.dataId){
			aiteList.list.push({
				friendId:aiteUser.dataId,
				friendName:aiteUser.nickName
			})
			// inputVal.value = inputVal.value.substring(0, inputVal.value.length - 1) + '@' + aiteUser.nickName
			inputVal.value = inputVal.value.substring(0,aiteList.cursorIndex) + '@' + aiteUser.nickName +inputVal.value.substring(aiteList.cursorIndex+1)
			wx.setStorageSync('aiteUserInfo', {})
			isFocus.value = true
		}
	})
	onMounted(async () =>{
		getArticleDetail()
		getCommentsPages()
		// await nextTick()
		// console.log('inputRef.value',inputRef.value)
		// if(isFocus.value) inputRef.value.focus()
	})

	onReachBottom(() => {
		console.log('滚动到底部')
		if(commentData.isEnd) return;
		pageData.page++
		getCommentsPages()
	})

	//监听输入的内容
	watch(inputVal,(newV,oldV) => {
		let newArr = newV.split('')

		//找到光标位置
		newArr.some((now, index) => {
			if (newV.substring(0, index+1) !== oldV.substring(0, index+1)) {
				aiteList.cursorIndex = index;
				return true;
			}
		})

		if(newV?.length > oldV?.length){
			//输入状态
			//判断光标位置输入的是否@
			if(newV[aiteList.cursorIndex] === '@'){
				//光标位置输入的是@
				aite()
			}
		}else{
			//删除状态
			//获取光标前面的文字
			let cursorFirstText = oldV.slice(0,aiteList.cursorIndex+1)
			//获取@符号的位置
			let atIndex =  cursorFirstText.lastIndexOf('@')
			//获取@符号到光标的文字
			let atToEndStr = cursorFirstText.slice(atIndex,aiteList.cursorIndex+1)

			for(let i = 0;i < aiteList.list.length;i++){
				let fName = aiteList.list[i].friendName
				if(atToEndStr === '@' + fName){
					// 获取@前面的位置  没有则空
					let firstText = atIndex - 1 <= 0 ? '' : newV.slice(0,atIndex)
					// 从@ 符号到光标的文字后面截取
					let lastText = oldV.slice(atIndex + atToEndStr?.length)
					//重新设置input的值
					inputVal.value = firstText + lastText
					//删除数组中的这个人
					aiteList.list.splice(i,1)
					//重新设置光标的位置  暂时不生效
					aiteList.cursorStart = atIndex
					aiteList.cursorEnd = atIndex + 1
					console.log('aiteList.cursorStart',aiteList.cursorStart)
					console.log('aiteList.cursorEnd',aiteList.cursorEnd)
				}
			}

		}
		// console.log('最新数组',aiteList.list)

	})

	//帖子详情
	const getArticleDetail = async () => {
		let res = await articleDetail({id:postingId.value})
		// console.log('帖子详情',res);
		postDetails.data = res
	}
	//评论分页
	const getCommentsPages = async () => {
		const datas = {
			...pageData,
			articleId:postingId.value,
			rootId:0,
			type:2
		}
		// 如果postCommentId有值 需要在请求第一页评论的时候带上postCommentId
		if(pageData.page == 1 && postCommentId.value){
			datas.id = postCommentId.value
		}
		let res = await commentsPages(datas)
		// console.log('评论',res.list);
		if(res.list.length < pageData.pageSize){
			commentData.isEnd = true
		}
		commentData.tableData = [...commentData.tableData,...res.list.map((item,index) => {
			if(item.comCount === 0){
				//没有子评论数
				return {
					...item,
					nickName:item.nickName || '暂无名字',
					isAuth:item.userId === commentData.authInfo.id,
					newTime:functions.timeText(item.createdTime),
					childrenData:{
						page:0,
						pageSize:5,
						list:[]
					}  
					// 点击展开后 讲获取的子评论加到childrenData里面 
					//需要记录当前这条父评论下面子评论的page及pageSize 方便点击的时候获取下一页
				}
			}else{
				return {
					...item,
					nickName:item.nickName || '暂无名字',
					isAuth:item.userId === commentData.authInfo.id,
					newTime:functions.timeText(item.createdTime),
					childrenData:{
						page:0,
						pageSize:5,
						list:[]
					}
					// 点击展开后 讲获取的子评论加到childrenData里面 
					//需要记录当前这条父评论下面子评论的page及pageSize 方便点击的时候获取下一页
				}
			}
		})]
	}


	//分享
	const toShare = () => {
		// console.log('popupShare.value',popupShare.value);
		popupShareRef.value.open('bottom')
	}

	//关注 取消关注作者
	const changeAttention = async () => {
		const res = await collectionUser({id:postDetails.data.dataId})
		uni.showToast({
			title: postDetails.data.isInterest ? '已取消关注' : '关注成功',
			icon:'none'
		});
		getArticleDetail()
		console.log('关注结果');
		
	}

	//帖子点赞
	const changeLike = async () => {
		let res = await artSaveLike({
			dataId:postingId.value,
			status: postDetails.data.isLike ? 2 : 1,  //1点赞  2 取消点赞
			type:1    	//类型:1帖子,2评论
		})
		uni.showToast({
			title: postDetails.data.isLike ? '已取消点赞' : '点赞成功',
			icon:'none'
		});
		getArticleDetail()
		console.log('点赞结果',res)
	}

	//帖子收藏
	const changeCollect = async () => {
		console.log('postingId.value',typeof(postingId.value));
		let res = await artSaveCollect({
			articleId:postingId.value,
			status: postDetails.data.isCollection ? 2 : 1  //1收藏  2 取消收藏
		})
		uni.showToast({
			title: postDetails.data.isCollection ? '已取消收藏' : '收藏成功',
			icon:'none'
		});
		getArticleDetail()
		console.log('收藏结果',res)
	}
	
	//发送评论
	const toSend = async () => {
		// console.log('点击发送 inputVal',inputVal.value)
		// console.log('myReplyTemp.data',myReplyTemp.data)
		let datas = {
			artcleOwnerId:postDetails.data.dataId,
			articleId:postingId.value,
			content:inputVal.value,
			replyId:0, //回复的评论的id 如果直接评论ID为0
			rootId:0, //顶层评论id  一级评论则为 : 0
			type:1
		}
		//如果有被@的用户
		if(aiteList.list.length > 0){
			let arr = []
			aiteList.list.forEach(item => {
				arr.push(item.friendId)
			});
			datas.atUserIds = arr.join(',')
		}
		if(myReplyTemp.data.item1){
			//回复
			datas.replyId = myReplyTemp.data.item2 ? myReplyTemp.data.item2.id : myReplyTemp.data.item1.id
			datas.rootId = myReplyTemp.data.item1.id
		}
		let res = await commentsInsert(datas)
		// console.log('-----------------新增评论',res)
		if(myReplyTemp.data.item1){
			//新增二级评论
			modifyData(myReplyTemp.data.item1.id,'addTwo',res)
		}else{
			//新增一级评论
			modifyData(0,'addOne',res)
		}
		inputVal.value = ''
		aiteList.list = []
		uni.showToast({
			title: '发送成功',
			icon:'none'
		});
		isFocus.value = false
		myReplyTemp.data = {}
		// getCommentsPages()

	}

	//评论框获取焦点
	const inputFocus = () => {
		isFocus.value = true
		// openComment()
		// console.log('获取焦点',isFocus.value)
	}
	const inputBlur = () => {
		isFocus.value = false
		myReplyTemp.status = 1
		// console.log('光标失焦',isFocus.value);
	}
	// 评论组件点击回复 事件
	// const myReply = (replyTemp) => {
	// 	console.log('myReply---replyTemp',replyTemp)
	// 	myReplyTemp.data = replyTemp
	// 	isFocus.value = true
	// }
	//输入框  placeholder 的值
	const placeholderVal = computed(() => {
		let res = ''
		if(myReplyTemp.status === 1 || !myReplyTemp.data.item1) return '留下你的评论吧～'
		res = myReplyTemp.data.item2 ? `回复给${myReplyTemp.data.item2.nickName}` : `回复给${myReplyTemp.data.item1.nickName}`
		return res
	})

	// 删除评论
	const changeDel = async (item) => {
		// console.log('点击删除',item)
		delPopupData.temp = item;
		delPopupData.content = item.comCount > 0 ? '此次删除将删除以下所有回复，是否确认?' : '确定删除这条评论吗?'
		delPopupRef.value.open();
	}

	// 关闭删除弹窗
	const delCloseFun = () => {
		delPopupData.temp = {};
		delPopupRef.value.close();
	}
	// 确定删除
	const delConfirmFun = async () => {
		let res = await commentsDelete({id:delPopupData.temp.id})
		// getCommentsPages()
		//这里不重新获取  删除原来的数据  不然会导致子评论那些又是折叠状态
		modifyData(delPopupData.temp.id,'del')
		uni.showToast({
			title: '删除成功',
			icon:'none'
		});
		delCloseFun()
	}

	//点赞评论
	const changeCommentLike = async (item) => {
		// console.log('item',item)
		let res = await commentsSaveLike({
			dataId:item.id,
			status: item.isLike ? 2 : 1,  //1点赞  2 取消点赞
			type:2    	//类型:1帖子,2评论
		})
		uni.showToast({
			title: item.isLike ? '已取消点赞' : '点赞成功',
			icon:'none'
		});
		modifyData(item.id,item.isLike?'cancelLike':'like')
		
		// getCommentsPages()
	}

	//回复评论
	const changeReply = (item1,item2) => {
		isFocus.value = true
		myReplyTemp.data.item1 = item1
		myReplyTemp.data.item2 = item2
		myReplyTemp.status = 2
	}

	//展开子评论
	const unfoldComment = async (item) => {

		const datas = {
			page:item.childrenData.page+1,
			pageSize:item.childrenData.pageSize,
			articleId:postingId.value,
			rootId:item.id,
			type:2
		}
		let res = await commentsPages(datas)
		// console.log('展开评论',res)
		for (let i = 0; i < commentData.tableData.length; i++) {
			if(commentData.tableData[i].id === item.id){
				commentData.tableData[i].childrenData.list = commentData.tableData[i].childrenData.list.concat(res.list).map(item2 => {
					return {
						...item2,
						isAuth:item2.userId === commentData.authInfo.id
					}
				})
				commentData.tableData[i].childrenData.page++
				// console.log('commentData.tableData[i]',commentData.tableData[i])
				break;
			}
		}
		// console.log('commentData.tableData',commentData.tableData)
		
	}


	/**
	 * 遍历数据，做操作 （用于修改数据后手动修改原来的数据 不重新调接口获取数据）
	 * @param {id} 评论id
	 * @param {type} 要做的操作类型    like-点赞   cancelLike-取消点赞  del-删除评论  addOne-新增一级评论  addTwo-新增二级评论
	 */
	const modifyData = (id,type,obj) => {
		if(type !== 'addOne'){
			testLoop:
			for (let i = 0; i < commentData.tableData.length; i++) {
				//如果是新增二级评论 直接往那个一级评论的childrenData.list里面添加数据
				if(type === 'addTwo' && commentData.tableData[i].id === id){
					//子评论数++
					commentData.tableData[i].comCount++
					commentData.tableData[i].childrenData.list.unshift({
						...obj,
						nickName:obj.nickName || '暂无名字',
						isAuth:obj.userId === commentData.authInfo.id,
						newTime:functions.timeText(obj.createdTime)
					})
				}
				if(commentData.tableData[i].childrenData.list.length > 0){
					//有子评论
					for (let j = 0; j < commentData.tableData[i].childrenData.list.length; j++) {
						if(commentData.tableData[i].childrenData.list[j].id === id){
							switch (type) {
								case 'like':
									commentData.tableData[i].childrenData.list[j].isLike = true
									commentData.tableData[i].childrenData.list[j].likes++
									break testLoop
								case 'cancelLike':
									commentData.tableData[i].childrenData.list[j].isLike = false
									commentData.tableData[i].childrenData.list[j].likes--
									break testLoop
								case 'del':
									commentData.tableData[i].childrenData.list.splice(j,1)
									//子评论数--
									commentData.tableData[i].comCount--
									postDetails.data.comments--
									break testLoop
							}
						}

					}
				}else{
					//没有子评论
					if(commentData.tableData[i].id === id){
						switch (type) {
							case 'like':
								commentData.tableData[i].isLike = true
								commentData.tableData[i].likes++
								break testLoop
							case 'cancelLike':
								commentData.tableData[i].isLike = false
								commentData.tableData[i].likes--
								break testLoop
							case 'del':
								commentData.tableData.splice(i,1)
								postDetails.data.comments--
								break testLoop
						}
					}
				}
			}
		}else if(type === 'addOne'){
			console.log('3333333')
			commentData.tableData.unshift({
				...obj,
				nickName:obj.nickName || '暂无名字',
				isAuth:obj.userId === commentData.authInfo.id,
				newTime:functions.timeText(obj.createdTime),
				childrenData:{
					page:0,
					pageSize:5,
					list:[]
				}
			})
		}
		
		
		console.log('操作完后---- 总评论',commentData.tableData)
	}

	//@人 跳转@好友页面
	const aite = () => {
		uni.navigateTo({
      url:  `/pages/aiteFriend/index`
    })
	} 

</script>

<style scoped lang="scss">
	.container{
		position: relative;
	}
	.bg{
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		position: absolute;
		top: 0;
		right: 0;
		z-index: 98;
	}
	/* 自定义状态栏 */
	.header-nav {
		height: calc(var(--status-bar-height) + 44px);
		position: fixed;
		top: 0;
		z-index: 97;
		width: 100%;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #FFFFFF;
	}

	/* 自定义导航栏 */
	.status_title {
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 44px;
		padding: 0 16px;
		background-color: #FFFFFF;
	}

	.status_left {
		display: flex;
		align-items: center;

		.status_header {
			display: flex;
			align-items: center;

			image {
				width: 64rpx;
				height: 64rpx;
				border-radius: 50%;
				margin: 0 16rpx;
			}

			text {
				font-size: 24rpx;
				color: #111111;
				font-weight: 500;
			}
		}

		>image {
			width: 44rpx !important;
		}
	}

	.status_center {
		font-size: 17px;
		font-weight: 700;
	}

	.status_right {
		display: flex;
		align-items: center;

		view {
			width: 104rpx;
			height: 48rpx;
			background: #16DFF2;
			border-radius: 24rpx;
			font-weight: 500;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 48rpx;
			text-align: center;
			margin-right: 16rpx;
			box-sizing: border-box;
		}
		.followed{
			background-color: white;
			color: #333333;
			border-radius: 24rpx;
			border: 2rpx solid #ADADAD;
		}

		image {
			width: 48rpx;
		}
	}

	.content-right {
		margin-top: calc(var(--status-bar-height) + 44px);
		padding-bottom: calc(env(safe-area-inset-bottom) + 116rpx);
	}

	.swiper {
		swiper {
			height: 800rpx;

			.swiper-item {
				height: 780rpx;
				position: relative;
				>image {
					width: 100%;
					height: 100%;
				}
				.try-it-on{
					position: absolute;
					left: 302rpx;
					bottom: 34rpx;
					width: 146rpx;
					height: 44rpx;
					background: #FFFFFF;
					border-radius: 22rpx;
					@include flex(row,center,center);
					>image{
						width: 36rpx;
						height: 36rpx;
						margin-right: 8rpx;
					}
					>text{
						font-weight: 400;
						font-size: 22rpx;
						color: #333333;
					}
				}
			}
		}
	}

	::v-deep .swiper .uni-swiper-dots {
		bottom: 0 !important;
	}

	::v-deep .swiper .uni-swiper-dot {
		width: 6px !important;
		height: 6rpx;
		border-radius: 6rpx;
		background: #E4E4E4;
	}

	::v-deep .swiper .uni-swiper-dot-active {
		width: 8px !important;
		height: 6rpx;
		border-radius: 4rpx;
		background: #2D2A3D;
	}

	.content-aside {
		/* padding: 30rpx; */

		.content-title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #333333;
			line-height: 34rpx;
			padding: 0 30rpx 18rpx 30rpx;
			box-sizing: border-box;
			margin-top: 40rpx;
		}

		.content-sub-title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #333333;
			line-height: 44rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			>text {
				color: #0BB1B0;
				padding-right: 10rpx;
			}
		}

		.content-ip {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #A9A7B3;
			line-height: 24rpx;
			margin-top: 36rpx;
			margin:36rpx 30rpx 60rpx 30rpx;
			box-sizing: border-box;
		}

		.content-reviews{
			width: 100%;
			/* background-color: pink; */
			
			.number{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #A9A7B3;
				margin-left: 30rpx;
				margin-bottom: 24rpx;
			}
			.comment-con{
				width: 100%;
				box-sizing: border-box;
				padding: 0 30rpx;
				.item{
					width: 690rpx;
					/* height: 120rpx; */
					margin-bottom: 36rpx;
					@include flex(row,flex-start,flex-start);

					>image{
						width: 68rpx;
						height: 68rpx;
						border-radius: 34rpx;
					}
					.item-con{
						width: 524rpx;
						/* height: 120rpx; */
						/* background-color: pink; */
						margin: 0 24rpx; 
						@include flex(column,flex-direction,flex-start);

						>.item-auth{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #A9A7B3;
							@include flex(row,flex-start);

							view{
								width: 70rpx;
								background-color: #0BB1B0;
								color: white;
								padding: 3rpx 5rpx;
								border-radius: 20rpx;
								margin-right: 10rpx;
								@include flex();
								font-size: 24rpx;
							}
						}
						>text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 26rpx;
							color: #333333;
							margin: 20rpx 0;
						}
						.item-time{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #999999;

							>text{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 24rpx;
								color: #666666;
								margin-left: 36rpx;
							}
						}
					}
					.item-like{
						width: 50rpx;
						@include flex(column,flex-start);

						>image{
							width: 40rpx;
							height: 40rpx;
						}
						>text{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #ADADAC;
						}
					}
				}	

				.item-children{
					.children-con{
						.item{
							width: 598rpx;
							margin-left: 92rpx;
							>image:nth-of-type(1){
								width: 44rpx;
								height: 44rpx;
							}
							.item-con{
								width: 456rpx;
							}
						}

						.unfold{
							font-family: PingFangSC, PingFang SC;
							font-weight: 500;
							font-size: 28rpx;
							color: #0BB1B0;
							margin:36rpx 0 36rpx 92rpx;
						}
					}
					
				}
			}
		}

		.is-end{
			text-align: center;
			margin: 15rpx;
			color: #8a8a8a;
		}
	}

	.comment-view{
		width: 750rpx;
		
		background: #ffffff;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 99;

		.safe-padding{
			background-color: rgb(255, 255, 255);
		}

		.comment-top{
			width: 750rpx;
			// height: auto;
			padding: 28rpx 20rpx;
			box-sizing: border-box;
			position: relative;
			@include flex(row,space-between);

			.comment-left{
				width: 440rpx;
				// height: auto;
				// position: relative;

				input{
					width: 100%;
					height: 70rpx;
					background: #F4F3F7;
					border-radius: 34rpx;
					padding-left: 24rpx;
					box-sizing: border-box;
					color: #707070;
					font-size: 26rpx;
					transition: all .3s linear;
				}

				.send{
					width: 160rpx;
					height: 70rpx;
					position: absolute;
					right: 26rpx;
					bottom: 34rpx;
					@include flex(row,space-between);
					// background-color: skyblue;

					image{
						width: 40rpx;
						height: 40rpx;
						/* margin-right: 32rpx; */
					}

					view{
						width: 88rpx;
						height: 58rpx;
						background: #16DFF2;
						border-radius: 28rpx;
						font-weight: 400;
						font-size: 26rpx;
						color: #FFFFFF;
						line-height: 58rpx;
						text-align: center;
					}
				}

				::v-deep .uni-easyinput{
					// height: 70rpx ;
				}
				::v-deep .uni-easyinput__content{
					// height: 70rpx ;
					background-color: #F4F3F7 !important;
				}
				::v-deep textarea{
					height: 70rpx ;
					min-height: 70rpx ;
					border-radius: 34rpx;
					background-color: #F4F3F7;
					// line-height: 70rpx;
				}
				::v-deep .is-input-border{
					border: none;
					border-radius: 34rpx !important;
				}
				::v-deep .uni-easyinput__placeholder-class{
					font-weight: 400;
					font-size: 24rpx;
					color: #A9A7B3;
					height: 70rpx;
					line-height: 70rpx;
				}
				::v-deep .uni-easyinput__content-textarea{
					margin: 0 ;
					height: 70rpx !important;
					line-height: 70rpx;
				}

			}

			::v-deep .input-placeholder{
				font-weight: 400;
				font-size: 24rpx;
				color: #A9A7B3;
			}
			.comment-right{
				width: 220rpx;
				@include flex(row,space-between);
				>view{
					width: 50rpx;
					height: 68rpx;
					@include flex(column,space-between);
					image{
						width: 40rpx;
						height: 40rpx;
					}
					text{
						font-weight: 400;
						font-size: 22rpx;
						color: #333333;
					}
				}
			}
		}

		// 光标获取焦点后
		.is-focus{
			width: 710rpx;
			height: auto !important;
			
			::v-deep .uni-easyinput{
				width: 710rpx !important;
				height: none !important;
			}
			::v-deep .uni-easyinput__content{
				width: 710rpx !important;
				height: none !important;
			}
			::v-deep textarea{
				width: 710rpx !important;
				height: none !important;
				// min-height: 70rpx !important;
				// border-radius: 34rpx !important;
				// background-color: #F4F3F7;
				padding: 10rpx 20rpx;
			}
			::v-deep .uni-easyinput__placeholder-class{
				line-height: 30rpx !important;
			}
			::v-deep .uni-easyinput__content-textarea{
				// padding-bottom: 70rpx;
				max-height: 120rpx;
				overflow: scroll;
				margin-bottom: 70rpx !important;
				line-height: 30rpx !important;
			}

			// .send{
			// 	width: 160rpx;
			// 	height: 70rpx;
			// 	position: absolute;
			// 	right: 30rpx;
			// 	bottom: 10rpx;
			// }
		}

		.is-father-focus{
			// height: auto !important;
		}
	}

	.test-father{
		background-color: #0BB1B0;
		padding: 20rpx;
	}
</style>